<template>
    <div>
      <mm-header></mm-header>
      <div class="container">
        <div class="container-title">
          <router-link to="/">首页</router-link>
          >
          <router-link to="/category">全部分类</router-link>
          >
          <button class="fr mui-btn-xs">筛选</button>
        </div>
         <ul class="mui-table-view"> 
            <li class="mui-table-view-cell mui-collapse" v-for="item in categoryTitle" :key="item.titleId">
                <a class="mui-navigate-right" href="#">{{item.title}}</a>
                  <div class="mui-collapse-content">
                    <ul>
                      <li v-for="(i, index) in handleCategory(item.titleId)" :key="index">
                        <router-link 
                        :to="'/categorySonList/categoryid=' + i.categoryId">
                        {{i.category}}
                        </router-link>
                      </li>
                    </ul>
                </div>
            </li>
        </ul>
      </div>
      <mm-footer></mm-footer>
    </div>
</template>

<script>
import mmHeader from './publicComponents/mmHeader.vue'
import mmFooter from './publicComponents/mmFooter.vue'
export default {
  data() {
    return {
      categoryTitle: [],
      titleList: [],
      catagoryInfoList: []
    }
  },
  created() {
    this.getCategoryTitle()
  },
  methods: {
    getCategoryTitle() {
      this.$http.get('api/getcategorytitle').then((res) => {
        // console.log(res.body.result)
        this.categoryTitle = res.body.result
        this.categoryTitle.forEach((item) => {
          this.titleList.push(item.titleId)
        })
        this.getCategoryInfo()
      })
    },
    getCategoryInfo() {
      for(var i=0;i<this.titleList.length;i++) {
        this.$http.get('api/getcategory?titleid='+i+'').then((res) => {
          // console.log(res.body.result)
          this.catagoryInfoList.push(res.body.result)
        })
      }
    },
    handleCategory(i) {
      var tt ;
      this.catagoryInfoList.forEach((item,index) => {
        if(i === index) {
          tt = this.catagoryInfoList[i]
        }
      })
      return tt;
    }
  },
  components: {
    mmHeader,
    mmFooter
  }
}
</script>

<style lang="less" scoped>
@import "../../src/less/var";
  .container {
     .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .mui-table-view {
      a.mui-navigate-right {
        font-size: 26/@base;
        font-weight: 400;
        line-height: 1.4;
      }
    }
    .mui-table-view-cell.mui-collapse .mui-collapse-content {
      padding: 0;
    }
    .mui-table-view-cell.mui-active {
      background-color: #ff841d !important; 
    }
    .mui-collapse-content {
      // border-bottom: 1px solid #ccc;
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          width: 33.33%;
          padding: 0;
          display: flex;
          height: 82/@base;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          font-weight: 400;
          font-size: 24/@base;
          &:nth-child(3n) {
            border-right: none;
          }
          a {
            display: block;
            color: #000;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 80/@base;
          }
        }
        
      }
    }
  } 
</style>
